<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信用卡申请进度查询</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.min93e3.css}" rel="stylesheet">
    <link th:href="@{/css/animate.min.css}" rel="stylesheet">
    <link th:href="@{/css/style.min.css}" rel="stylesheet">
    <link  th:href="@{/angularjs/pagination.css}" rel="stylesheet">

    <link th:href="@{/css/plugins/datapicker/datepicker3.css}" rel="stylesheet">

    <script th:src="@{/angularjs/angular.min.js}"></script>
    <script th:src="@{/angularjs/pagination.js}"></script>

    <!-- 全局js -->
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <style>
        th{
            text-align: center;
        }
        .status1{
            color: #99FF00;
        }
        .status2{
            color: yellow;
        }
        .status3{
            color: red;
        }
    </style>
    <script>
        var app = angular.module('MyApp',['pagination']);
        app.controller('MyController',function ($scope,$http) {
            $scope.cpStatus="全部";
            $scope.paginationConf={
                currentPage:1,//当前页
                itemsPerPage:5,//一页记录数
                totalItems:100,//总记录数
                perPageOptions:[1,2,3,4,5],
                //页码或页面大小改变自动调用
                onChange:function () {
                    $scope.getProgressList($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
                }
            }
            //查询申请列表
            $scope.getProgressList=function (pageIndex,pageSize) {
                let s=$("#startTime").val();
                let e=$("#endTime").val();
                $http({
                    url:"/progress/getCardProgressList",
                    method:"GET",
                    params:{
                        pageIndex:pageIndex,
                        pageSize:pageSize,
                        cpStatus:$scope.cpStatus=="全部"?null:$scope.cpStatus,
                        startTime:s==""?null:s,
                        endTime:e==""?null:e},
                    dataType:"json"
                }).success(function (data) {
                    $scope.cpList=data.datas;
                    $scope.paginationConf.totalItems=data.totalNum;
                })
            }
            //查询基本信息
            $scope.getEssential=function (essentialid) {
                $http({
                    url:"/progress/getEssential",
                    method:"GET",
                    params:{essentialId:essentialid},
                    dataType:"json"
                }).success(function (data) {
                    $scope.essential=data;
                    $("#essentialModal").modal("show");
                })
            }
            //查询单位信息
            $scope.getUnit=function (uid) {
                $http({
                    url:"/progress/getUnit",
                    method:"GET",
                    params:{uid:uid},
                    dataType:"json"
                }).success(function (data) {
                    $scope.unit=data;
                    $("#unitModal").modal("show");
                })
            }
            //查询联系人信息
            $scope.getContact=function (contactId) {
                $http({
                    url:"/progress/getContact",
                    method:"GET",
                    params:{contactId:contactId},
                    dataType:"json"
                }).success(function (data) {
                    $scope.contact=data;
                    $("#contactModal").modal("show");
                })
            }
            //重置时间范围
            $scope.resetTime=function () {
                $("#startTime").val("");
                $("#endTime").val("");
            }
        })
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController" class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>信用卡申请进度</h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-2 m-b-xs">
                            <select ng-change="getProgressList(1,5)" ng-model="cpStatus" class="input-sm form-control input-s-sm inline">
                                <option value="全部">全部</option>
                                <option value="成功">成功</option>
                                <option value="申请中">申请中</option>
                                <option value="失败">失败</option>
                            </select>
                        </div>
                        <div class="col-sm-4">
                            <div class="input-group" id="data1">
                                <div class="input-daterange input-group" id="datepicker">
                                    <input type="text" class="input-sm form-control" name="start" id="startTime" value=""/>
                                    <span class="input-group-addon">到</span>
                                    <input type="text" class="input-sm form-control" name="end" id="endTime" value=""/>
                                </div>
                                <span class="input-group-btn">
                                    <button type="button" ng-click="getProgressList(1,5)" class="btn btn-sm btn-primary"> 查询</button>
                                    <button type="button" ng-click="resetTime()" class="btn btn-sm btn-warning"> 重置</button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table text-center">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>办卡类型</th>
                                <th>基本信息</th>
                                <th>单位信息</th>
                                <th>联系人信息</th>
                                <th>申请状态</th>
                                <th>备注</th>
                                <th>创建时间</th>
                                <th>审核时间</th>
                                <th>审核人</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="cprogress in cpList">
                                <td>{{$index+1}}</td>
                                <td>{{cprogress.creditType}}</td>
                                <td><a ng-click="getEssential(cprogress.essentialid)">查看</a></td>
                                <td><a ng-click="getUnit(cprogress.uid)">查看</a></td>
                                <td><a ng-click="getContact(cprogress.contactId)">查看</a></td>
                                <td ng-class="{status1:cprogress.cpStatus=='成功',status2:cprogress.cpStatus=='申请中',status3:cprogress.cpStatus=='失败'}">{{cprogress.cpStatus}}</td>
                                <td style="width: 200px">{{cprogress.cpReason}}</td>
                                <td>{{cprogress.cpCreateTime}}</td>
                                <td style="width: 150px;">{{cprogress.cpDealTime}}</td>
                                <td>{{cprogress.adminName}}</td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="pull-right">
                            <tm-pagination conf="paginationConf"></tm-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--------------------------------------基本信息模态框开始--------------------------------------------->
<div class="modal inmodal" id="essentialModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                </button>
                <h5 class="modal-title">基本信息</h5>
            </div>
            <div class="modal-body">
                <div class="table-responsive m-t">
                    <table class="table">
                        <tr>
                            <td><strong>真实姓名</strong></td>
                            <td>{{essential.realname}}</td>
                        </tr><tr>
                            <td><strong>身份证号</strong></td>
                            <td>{{essential.identityid}}</td>
                        </tr><tr>
                            <td><strong>证件有效期</strong></td>
                            <td>{{essential.timeout}}</td>
                        </tr><tr>
                            <td><strong>手机号</strong></td>
                            <td>{{essential.phonenumber}}</td>
                        </tr><tr>
                            <td><strong>民族</strong></td>
                            <td>{{essential.nname}}</td>
                        </tr><tr>
                            <td><strong>婚姻状况</strong></td>
                            <td>{{essential.mname}}</td>
                        </tr><tr>
                            <td><strong>受教育程度</strong></td>
                            <td>{{essential.ename}}</td>
                        </tr><tr>
                            <td><strong>安全问题</strong></td>
                            <td>{{essential.qname}}</td>
                        </tr><tr>
                            <td><strong>安全问题答案</strong></td>
                            <td>{{essential.answer}}</td>
                        </tr><tr>
                            <td><strong>城市</strong></td>
                            <td>{{essential.cname}}</td>
                        </tr><tr>
                            <td><strong>住房状况</strong></td>
                            <td>{{essential.house}}</td>
                        </tr><tr>
                            <td><strong>邮政编码</strong></td>
                            <td>{{essential.postnum}}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--------------------------------------基本信息模态框结束-------------------------------------------------->
<!--------------------------------------单位信息模态框开始--------------------------------------------->
<div class="modal inmodal" id="unitModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                </button>
                <h5 class="modal-title">单位信息</h5>
            </div>
            <div class="modal-body">
                <div class="table-responsive m-t">
                    <table class="table">
                        <tr>
                            <td><strong>单位名称</strong></td>
                            <td>{{unit.unitname}}</td>
                        </tr><tr>
                            <td><strong>单位性质</strong></td>
                            <td>{{unit.nname}}</td>
                        </tr><tr>
                            <td><strong>发展行业</strong></td>
                            <td>{{unit.iname}}</td>
                        </tr><tr>
                            <td><strong>单位城市</strong></td>
                            <td>{{unit.cname}}</td>
                        </tr><tr>
                            <td><strong>职务</strong></td>
                            <td>{{unit.pname}}</td>
                        </tr><tr>
                            <td><strong>年收入</strong></td>
                            <td>{{unit.annualincome}}</td>
                        </tr><tr>
                            <td><strong>单位电话</strong></td>
                            <td>{{unit.unitPhone}}</td>
                        </tr><tr>
                            <td><strong>单位邮编</strong></td>
                            <td>{{unit.upostnumber}}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--------------------------------------单位信息模态框结束-------------------------------------------------->
<!--------------------------------------联系人信息模态框开始--------------------------------------------->
<div class="modal inmodal" id="contactModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                </button>
                <h5 class="modal-title">联系人信息</h5>
            </div>
            <div class="modal-body">
                <div class="table-responsive m-t">
                    <table class="table">
                        <tr>
                            <td><strong>联系人姓名</strong></td>
                            <td>{{contact.contactName}}</td>
                        </tr><tr>
                            <td><strong>联系人电话</strong></td>
                            <td>{{contact.contactPhone}}</td>
                        </tr><tr>
                            <td><strong>与申请人关系</strong></td>
                            <td>{{contact.contactRelation}}</td>
                        </tr><tr>
                            <td><strong>默认还款账户</strong></td>
                            <td>{{contact.autopayCount}}</td>
                        </tr><tr>
                            <td><strong>卡片领取方式</strong></td>
                            <td>{{contact.mname}}</td>
                        </tr><tr>
                            <td><strong>是否知情</strong></td>
                            <td>{{contact.knowsbook=="true"?"是":"否"}}</td>
                        </tr><tr>
                            <td><strong>邮箱</strong></td>
                            <td>{{contact.email}}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--------------------------------------联系人信息模态框结束-------------------------------------------------->
</body>
<!-- Data picker -->
<script th:src="@{/js/plugins/datapicker/bootstrap-datepicker.js}"></script>

<!-- Bootstrap table -->
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script>
    //日期选择插件js
    $('.input-daterange').datepicker({
        keyboardNavigation: false,
        forceParse: false,
        autoclose: true
    });
</script>
</html>